<template>
	<view>
		<u-picker :show="show" :columns="columns" keyName="label" @cancel="show = false" @confirm="confirmPicker"></u-picker>
		<view class="nav flex">
			<view @click="show = true" class="nav-item flex align-center justify-between">
				<view class="nav-text">{{ selectDate.label }}</view>
				<view class="nav-icon">
					<u-icon name="arrow-down" color="#2D2C3C" size="14"></u-icon>
				</view>
			</view>
		</view>
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in listData" :key="item.id">
				<view @click="goNoticeDetail(item.id)" class="list-item">
					<view class="item-line title">{{ `${item.xqName} - ${item.buildingName} - ${item.unitName} - ${item.roomName}` }}</view>
					<view class="item-line time">{{ item.checkTime }}</view>
					<view class="item-line">
						<span>姓名： {{ item.residentName }}</span>
						<span v-if="item.residentType">住户类型： {{ getValue(item.residentType, residentType) }}</span>
					</view>
					<view class="item-line flex align-center">
						<view>人员属性：</view>
						<view class="tag" v-for="(tag, index) in item.peopleTag" :key="index">
							{{ getValue(tag, people_label) }}
						</view>
						<span v-if="!item.peopleTag.length">无</span>
					</view>
					<!-- 					<view class="right-btn flex justify-center align-center">
            <u-icon name="arrow-right" color="#FFF" size="18"></u-icon>
          </view> -->
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
import * as HouseApi from '@/api/house.js'
import * as DictApi from '@/api/system/dict.js'
import { formatDate } from '@/utils/common.js'
export default {
	data() {
		return {
			show: false,
			columns: [],
			selectDate: {},
			pickerType: '',
			queryParams: {
				pageNo: 1,
				pageSize: 10
			},
			total: 0,
			listData: [],
			residentType: [],
			people_label: []
		}
	},
	methods: {
		getValue(value, list) {
			if (!list || list.length == 0) return ''
			const index = list.findIndex((ele) => ele.value == value)
			return index > -1 ? list[index].label : ''
		},
		openPicker(e) {
			this.show = true
		},
		confirmPicker(e) {
			this.show = false
			const item = e.value[0]
			this.selectDate = item
			this.queryParams.pageNo = 1
			this.getVisitList(true)
		},
		getVisitList(reset) {
			const data = {
				...this.queryParams,
				timeDictData: this.selectDate.value
			}
			HouseApi.getVisitList(data).then((res) => {
				this.total = res.data.total
				const list = res.data.list.map((i) => {
					return {
						...i,
						checkTime: formatDate(i.checkTime)
					}
				})
				this.listData = reset ? list : this.listData.concat(list)
			})
		},
		scrolltolower() {
			this.loadmore()
		},
		loadmore() {
			if (this.listData.length >= this.total) return
			this.queryParams.pageNo + 1
			this.getVisitList()
		},
		getTypeList() {
			DictApi.getTypeList({ dictTypeList: ['house_time', 'BottomData_resident_type', 'people_label'] }).then((res) => {
				this.columns = [res.data.house_time]
				this.residentType = res.data.BottomData_resident_type
				this.people_label = res.data.people_label
				this.selectDate = res.data.house_time[0]
				this.getVisitList()
			})
		}
	},
	onLoad() {
		this.getTypeList()
	}
}
</script>

<style lang="scss">
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #f5f8fd;
	min-height: 100%;
	height: auto;
	font-size: 28rpx;
}

.nav {
	display: flex;
	padding: 30rpx;
}

.nav-item {
	width: 320rpx;
	height: 80rpx;
	border-radius: 8rpx;
	opacity: 1;
	background: #ffffff;
	box-sizing: border-box;
	border: 2rpx solid #e4ebf6;
	line-height: 1;
	padding: 10rpx 20rpx;
	position: relative;
	.nav-text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.nav-icon {
		position: absolute;
		top: 22rpx;
		right: 10rpx;
	}
}
.list-item {
	margin: 0 20rpx 20rpx;
	border-radius: 20rpx;
	border-radius: 8rpx;
	background: #ffffff;
	position: relative;
	padding-top: 10rpx;
	.item-line {
		margin: 20rpx 25rpx;
		span {
			margin-right: 20rpx;
		}
		.tag {
			padding: 10rpx 20rpx;
			margin-left: 10rpx;
			color: #fff;
			background: #ffdfe2;
			border-radius: 30rpx;
			color: #ff3d3d;
		}
	}
	.title {
		font-size: 32rpx;
	}
	.time {
		color: #999999;
	}
	.right-btn {
		position: absolute;
		right: 0;
		top: 0px;
		width: 80rpx;
		height: 100%;
		border-radius: 0px 8rpx 8rpx 0px;
		background: #74abfc;
	}
}
</style>
